<template>
	<van-popup v-model="hasRecord" class="bettingRecord_page">
		<div class="bettingRecord_box">
			<div class="work_title">
				{{title}}
				<van-icon name="cross" class="close_icon" size="18" color="#fff" @click="$emit('input', false)" />
			</div>
			<div class="table_box" ref="table_box">
				<!-- overscroll-behavior: none; -->
				<div style="overflow-x: auto; overflow-y: auto;" :style="$utils.isSafari() ? '' : ''">
					<div style="width: 100%;min-width: 700px;">
						<el-table :data="list2" style="width: 100%; height: 100%;" header-row-class-name="header_class"
							row-class-name="row_class" stripe v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.8)"
							:height="tableHeight">
							<el-table-column prop="date" :label="$t('home.pair')" min-width="120">
								<template slot-scope="scope">
									<div class="item-a0">
										<div class="img_box">
											<img :src="scope.row.currency_match.base_currency.logo" />
											<img :src="scope.row.currency.logo" />
										</div>
										{{scope.row.symbol_name}}
										<img
											:src="scope.row.type == 1 ? require('@/assets/images/home/zhang.png') : require('@/assets/images/home/die.png')"
											class="zhang" />
									</div>
								</template>
							</el-table-column>
							<el-table-column prop="name" :label="$t('home.currency')" min-width="100" align="center">
								<template slot-scope="scope">
									USDT
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.amount')" min-width="80" align="center">
								<template slot-scope="scope">
									{{scope.row.amount}}
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.open')" min-width="100" align="center">
								<template slot-scope="scope">
									{{scope.row.open_price}}
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.close')" key="close" min-width="100" align="center">
								<template slot-scope="scope">
									{{scope.row.end_price}}
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.yield')" key="YIELD" min-width="60" align="center">
								<template slot-scope="scope">
									{{scope.row.profit_ratio}}%
								</template>
							</el-table-column>
							<el-table-column prop="address" :label="$t('home.profit')" key="PROFIT" min-width="60" align="right">
								<template slot-scope="scope">
									{{scope.row.profit}}
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</div>
		<div class="fen_ye_box">
			<span>{{$t('home.total')}} {{pageInfo.total || 0}}</span>
			<i class="el-icon-arrow-left cur_p" @click="handlePre()"></i>
			{{page || 1}}/{{pageInfo.last_page || 1}}
			<i class="el-icon-arrow-right cur_p" @click="handleNext()"></i>
		</div>
	</van-popup>
</template>

<script>
	import {
		microtradeLists
	} from '@/api/home'
	export default {
		props: {
			value: {
				type: Boolean,
				default: false,
			}
		},
		components: {},
		data() {
			return {
				page: 1,
				loading: false,
				finished: false,
				hasInfo: false,
				tableHeight: 300,
				pageInfo: {},
				list: [],
				list2: [],
			}
		},
		computed: {
			hasRecord: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			},
			userInfo() {
				return this.$store.state.userInfo
			},
			matches() {
				return this.$store.state.matches
			},
			newMyDownOrder() {
				return this.$store.state.newMyDownOrder
			},
			timeDown() {
				return this.$store.state.timeDown
			},
			title() {
				return this.$t('home.tradeTitle')
			}
		},
		watch: {
			timeDown(val, oldVal) {
				// console.log('val', val);
				// if (this.list && this.list.length > 0) {
				// 	this.list.map((item, index) => {
				// 		if (item.remain_milli_seconds <= 0) {
				// 			this.$nextTick(() => {
				// 				// console.log('删除');
				// 				this.list.splice(index, 1)
				// 			})
				// 			if (this.type == 1) {
				// 				this.page = 1
				// 				this.getList()
				// 			}
				// 			// this.$store.commit('closeMyOrderDom', item)
				// 		}
				// 	})
				// 	// console.log('this.list::', this.list);
				// }
			},
			newMyDownOrder(val) {
				// console.log('val', val);
				if (val && val.uid) {
					if (this.list.find(i => i.uid != val.uid)) {
						this.list.push(val)
						this.finished = true;
						this.loading = false;
					}
				}
			},
		},
		mounted() {
			// if (this.newMyDownOrder && this.newMyDownOrder.remain_milli_seconds > 0) {
			// 	this.list.push(this.newMyDownOrder)
			// 	this.finished = true;
			// 	this.loading = false;
			// }
			// console.log('userInfo', this.userInfo);
			this.getList()
		},
		methods: {
			handlePre() {
				if (this.page <= 1) return
				this.page--
				this.getList()
			},
			handleNext() {
				if (this.page >= this.pageInfo.last_page) return
				this.page++
				this.getList()
			},
			async getList() {
				// console.log('请求');
				this.loading = true
				const res = await microtradeLists({
					match_id: this.matches.id,
					// status: this.type == 0 ? 1 : 3,
					is_public: 0, // 是否是公共 1是 0当前用户
					status: 3,
					limit: 10,
					page: this.page,
				}).catch(err => this.loading = false)
				console.log('res', res, );
				if (res && res.code == 1) {
					this.list2 = res.data.data
					this.pageInfo = res.data
					if(this.list2 && this.list2.length > 0) {
						this.$nextTick(() => {
							this.tableHeight = this.$refs.table_box.offsetHeight;
						})
					}
				}
				this.loading = false
			},
			handleItem(item) {
				this.details = item
				this.hasInfo = true
			},
			handleClose() {
				this.hasInfo = false
			}
		}
	}
</script>

<style scoped lang="less">
	.bettingRecord_page {
		width: calc(100vw - 60px);
		padding: 0 25px 20px;
		min-height: 40vh;
		max-height: 40vh;
		background-color: #212A36;
		border-radius: 10px;
		top: 5vh;
		transform: translate3d(-50%, 0, 0);
		display: flex;
		flex-direction: column;


		.bettingRecord_box {
			width: 100%;
			position: relative;
			flex: 1;
			min-height: 1px;
			display: flex;
			flex-direction: column;

			.work_title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24px;
				font-weight: bold;
				margin-bottom: 20px;
				position: sticky;
				top: -1px;
				background-color: #212A36;
				padding-top: 20px;
				padding-bottom: 5px;

				i {
					font-weight: bold;
				}
			}
		}



		.table_box {
			width: 100%;
			flex: 1;
			min-height: 1px;
			overflow: auto;
			margin-bottom: 20px;

			&::-webkit-scrollbar {
				display: none;
			}


			::v-deep .el-table--scrollable-x .el-table__body-wrapper {
				&::-webkit-scrollbar {
					display: none;
				}
			}

			::v-deep .el-table__body-wrapper {
				&::-webkit-scrollbar {
					display: none;
				}
			}

			.el-table {
				background-color: transparent;

				&::before {
					background-color: transparent
				}
			}

			::v-deep .header_class {
				background-color: transparent;

				th.el-table__cell {
					padding: 0;
					background-color: transparent;
					border-bottom: none;
					font-size: 12px;
					color: #fff;

					.cell {
						line-height: 20px;
						padding-left: 5px;
						padding-right: 5px;
					}
				}
			}

			::v-deep .row_class {
				background-color: transparent;

				&:hover {
					td.el-table__cell {
						background-color: transparent;
					}
				}

				td.el-table__cell {
					padding: 0;
					font-size: 12px;
					border-bottom: none;
					color: #fff;

					.cell {
						// height: 40px;
						// padding: 8px 0;
						line-height: 40px;
						padding-left: 5px;
						padding-right: 5px;
						white-space: nowrap;
					}
				}

				&.el-table__row--striped {
					td.el-table__cell {
						background: #1B232E;
					}
				}
			}

			.user_header {
				display: flex;
				align-items: center;

				.header {
					width: 32px;
					height: 32px;
					border-radius: 6px;
					margin-right: 5px;
				}
			}

			.item-a0 {
				display: flex;
				align-items: center;
				white-space: nowrap;

				.img_box {
					display: flex;

					img {
						position: relative;
						z-index: 2;
						width: 20px;
						border-radius: 50%;
					}

					img+img {
						margin-left: -10px;
						z-index: 1;
						margin-right: 5px;
					}
				}

				.zhang {
					width: 10px;
					margin-left: 10px;
				}
			}

			.but_box {
				display: flex;
				margin-bottom: 10px;

				::v-deep .el-button {
					min-width: 100px;
					height: 40px;
					padding: 10px;
					font-size: 12px;
					color: #A4A8AB;
					margin: 4px;
					background-color: #212A36;
					border: 0;
					border-radius: 12px;
				}
			}
		}

		.fen_ye_box {
			position: absolute;
			bottom: 10px;
			left: 0;
			width: 100%;
			text-align: right;
			color: #fff;
			// margin-top: 24px;
			font-size: 14px;
			background-color: #212A36;
			padding: 5px 0;
			z-index: 8;

			i {
				margin: 0 20px;
				font-size: 18px;
			}
		}
	}
</style>